<script setup lang="ts">
import {PropType, reactive, ref, Ref, watch} from "vue";
import {Delete, Plus} from "@element-plus/icons-vue";
import {FormInstance, FormRules} from "element-plus";

type Column = {
  field: string,
  value: string,
}
type Values = {
  value: string,
  label: string
}
const props = defineProps({
  fields: {type: Array as PropType<Array<Values>>, default: () => []}
})

type UpdateForm = {
  list: Array<Column>
}

watch(props.fields, () => {
  form.list.splice(0, form.list.length);
})

type Script = {
  "inline": string
}

const form = reactive<UpdateForm>({list: []});
const formRef = ref<FormInstance>()
type RefArray<T> = Ref<Array<T>>;
const emit = defineEmits<{
  (e: "change", value: Script): void;
}>()
const list: RefArray<Column> = ref([]);
const visible = ref(false);


const filterMethod = (query, item) => {
  return item.label.toLowerCase().includes(query.toLowerCase())
}
const save = () => {
  formRef.value.validate(v => {
    if (v) {
      let content = "";
      form.list.forEach(target => {
        if (content) {
          content += ";";
        }
        content += "ctx._source['" + target.field + "']=" + target.value + ""
      })
      emit("change", {"inline": content});
      close();
    }
  })

}
const formRule = reactive<FormRules<UpdateForm>>({
  list: [
    {required: true, type: "array", message: '列表为必填项', trigger: ['blur', 'change']},
  ]
});
const close = () => {
  visible.value = false;
}
const show = () => {
  visible.value = true;
}
const deleteByIndex = (index) => {
  form.list.splice(index, 1);
}
const addField = () => {
  form.list.push({
    field: "",
    value: "",
  })
}
</script>

<template>
  <el-button text @click="show">按条件更新
    <el-dialog append-to-body width="600px" title="设置" v-model="visible" @close="close">
      <el-button-group style="margin-bottom: 5px">
        <el-button text @click="addField" :icon="Plus">添加</el-button>
        <el-button text @click="form.list.splice(0,form.list.length)" :icon="Delete">清空</el-button>
      </el-button-group>

      <el-form :model="form" label-width="0" ref="formRef" :rules="formRule">
        <el-form-item prop="list">
          <el-table :data="form.list" border stripe>
            <el-table-column align="center" label="字段">
              <template #default="scope">
                <el-form-item
                    :prop="'list['+scope.$index+'].field'" :rules="{
                required: true,
                message: '字段为必填项',
                trigger: ['blur','change'],
              }"
                >
                  <el-select-v2 placeholder="请选择" v-model="scope.row.field" clearable filterable style="width: 100%" :options="fields">
                  </el-select-v2>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="值">
              <template #default="scope">
                <el-form-item
                    :prop="'list['+scope.$index+'].value'" :rules="{
                required: true,
                message: '值为必填项',
                trigger: ['blur','change'],
              }"
                >
                  <el-input v-model="scope.row.value" placeholder="比如 'elastic'"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="50px">
              <template #default="scope">
                <el-form-item>
                  <el-button text :icon="Delete" @click="deleteByIndex(scope.$index)"></el-button>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </el-button>
</template>

<style scoped>

</style>